<template>
    <div class="table">
        <div class="crumbs orderTitle">
            <h1 class="orderH1">验券</h1>
        </div>

        <div class="container">
            <div class="selectStore checkCoupon_box">
                <div class="checkCoupon_from">
                    <el-input
                        v-model="searchMobile"
                        placeholder="输入券号" class="checkCoupon_input" >
                        <el-button slot="append"  icon="el-icon-search" type="success" circle @click="querySearchAsync(searchMobile,1)"></el-button>
                    </el-input>
                </div>
            </div>

            <div class="ticketBox" v-show="ticketBoxFlag">
                <div class="statusBox">
                    <i>{{ticket.statusType}}</i>
                </div>
                <h1>{{ticket.name}}</h1>
                <h2>{{ticket.couponCode}}</h2>
                <p style="margin-bottom: 10px">
                    <span>{{user.name}}</span>
                    <span class="phoneColor">{{user.mobileNumber}}</span>
                </p>
                <p style="margin-bottom: 10px">
                    <span>流水号：</span>
                    <span>{{order.transID}}</span>
                </p>
                <p>
                    <span>交易时间：</span>
                    <span>{{order.tradeDate}}</span>
                </p>
                <el-button type="primary" v-if="isUser === 1 || isUser === 2" @click="voucherFn" v-show="voucherBtn">验 券</el-button>
                <!--<el-button type="primary" v-if="isUser === 1" @click="makeUpVoucherFn" v-show="makeUpVoucherBtn">补偿券</el-button>-->
            </div>


        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {formatDate} from '../tool/tool'
    export default {
        data() {
            return {
                searchMobile:'',
                ticket:{},
                user:{},
                order:{},
                voucherCode:'',
                ticketBoxFlag: false,
                voucherBtn: false,
                makeUpVoucherBtn: false,
                isUser: 0,
            }
        },
        created() {
            let userRole = null;
            if(localStorage.getItem('userRole')){
                userRole = localStorage.getItem('userRole');
                if(userRole === '咨询'){
                    this.isUser = 1;
                }else if(userRole === '店长'){
                    this.isUser = 2;
                }else{
                    this.isUser = 3;
                }
            }

        },
        computed: {},
        methods: {
            querySearchAsync:function(e){
                console.log(this.isUser)
                if(!e){
                    this.$message({
                        type: 'error',
                        message: '不能为空'
                    });

                }else{
                    this.voucherCode = e;
                    this.getVoucher(this,this.voucherCode);
                }
            },
            getVoucher:function(that,e){
                let filters =  {
                    formatDate(time) {
                        let date = new Date(time);
                        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
                    }
                };
                storeAsGet('/myTicket/couponCode?couponCode='+ e ).then(res=>{
                    that.ticket = res.data.content.myTicket;
                    that.user = that.ticket.user;
                    that.order = that.ticket.paymentOrder;
                    that.order.tradeDate = filters.formatDate(that.order.tradeDate);
                    that.ticketBoxFlag = true;
                    console.log(that.ticket)
                    if(!that.ticket.user.name){
                        that.ticket.user.name = that.ticket.user.nick
                    }
                    if(that.ticket.myTicketStatus === 'NORMAL'){
                        that.voucherBtn = true
                    }
                    if(that.ticket.myTicketStatus === 'USED'){
                        that.makeUpVoucherBtn = true
                    }
                    if(that.ticket.myTicketStatus === 'COMPENSATED'){
                        that.makeUpVoucherBtn = false
                    }
                    this.statusSwich(that.ticket.myTicketStatus,that)
                }).catch(function(res){
                    console.log(res)
                    that.$message({
                        type: 'error',
                        message: '您输入的券号有误！请重新输入'
                    });
                });
            },
            voucherFn:function(){
                let that = this;
                storeAsPost({},'/myTicket/verify?couponCode='+ this.voucherCode ).then(res=>{
                    console.log(res)
                    this.voucherBtn = false;
                    this.getVoucher(this,this.voucherCode);
                    this.statusSwich(that.ticket.myTicketStatus,that)
                })
            },
            makeUpVoucherFn: function(){
                let that = this;
                storeAsPost({},'/myTicket/compensate?couponCode='+ this.voucherCode ).then(res=>{
                    console.log(res)
                    this.makeUpVoucherBtn = false;
                    this.getVoucher(this,this.voucherCode);
                    this.statusSwich(that.ticket.myTicketStatus,that)
                })
            },
            statusSwich:function(status,obj){
                console.log(status,545454545)
                switch(status){
                    case 'USED':
                        obj.ticket.statusType = '已使用';
                        break;
                    case 'NORMAL':
                        obj.ticket.statusType = '可使用';
                        break;
                    case 'COMPENSATED':
                        obj.ticket.statusType = '已补偿';
                        break;
                }
            }
        }


    }

</script>

<style scoped>
    .orderH1{
        font-size: 20px;
        color: #666;
        display: inline-block;
    }
    .orderTitle{
        margin-bottom: 20px;
    }
    .selectStore{
        padding-bottom: 20px;
        border-bottom:#eee 1px solid
    }
    .ticketBox{
        position: absolute;
        left: 50%;
        border: #ddd 1px solid;
        border-radius: 10px;
        width: 400px;
        margin: 15px 0 0 -210px;
        padding: 15px 20px;
        background: linear-gradient(-135deg, transparent 65px, #fefefe 0), linear-gradient(135deg, transparent 65px, #46a716 0);
    }
    .ticketBox  h1{
        text-align: center;
        font-size: 24px;
    }
    .ticketBox  h2{
        text-align: center;
        line-height: 60px;
        color: #999;

    }
    .ticketBox  p{
        text-align: center;
        margin-bottom: 60px;
    }
    .ticketBox .statusBox i{
        position: absolute;
        width: 70px;
        right: -9px;
        top: 23px;
        transform: rotate(45deg);
        color: #fff;
    }
    .ticketBox button{
        width: 100%;
        height: 40px;
        border-radius: 0 0 10px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        font-size: 14px;
    }
    .phoneColor{
        color: red;
    }

    .checkCoupon_box{
        text-align: center;
    }
    .checkCoupon_from{
        display: inline-block;
        width: 400px;
    }
    .checkCoupon_box .el-input--small .el-input__inner{
        height: 60px!important;
    }
    .checkCoupon_input{
        font-size: 20px;
    }
</style>
